<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .yellow {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>

    <script>
      class Cat {
        // Cat类 父类
        constructor(n, c) {
          // 构造函数
          // this -> 实例对象
          this.name = n
          this.color = c
          this.sayHi = function () {
            console.log("喵~")
          }
          console.log(456)
        }
        // 在构造函数外部定义的函数就是添加在原型上的方法
        // Cat.prototype.skill = function (){console.log( '抓老鼠' )}
        skill() {
          console.log("抓老鼠")
        }
        // Cat.prototype.type = 'animal'
        // type = 'animal' // 实例对象的属性
        static sayHi() {
          // 静态方法 Cat.sayHi()
          console.log("hi")
        }
        static abc = 123 // 静态属性 Cat.abc
      }
      class Fn extends Cat{
        constructor() {
          super()
          this.data = {
            name: "xx",
            age: 10,
          }
          this.color = "white"
          console.log(123)
        }
        sayHi() {
          console.log(123)
        }
      }
      Fn.prototype.sayHi = function () {
        console.log(456)
      }
      Fn.prototype.skill = "出去玩"
      const fn = new Fn()
      // console.log(fn.skill)
      // console.log(fn.sayHi())
      // console.log(fn.data.name)
      // console.log(fn.data.age)
      // console.log(fn.color)
    </script>
  </body>
</html>
